<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="65%"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
        <el-row :gutter="15">
          <el-col :span="15">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="选手编号" prop="number">
                  <el-input v-model="formData.number" clearable placeholder="请输入选手编号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选手分组" prop="group_id">
                  <el-select v-model="formData.group_id" placeholder="选手分组" size="large">
                    <el-option label="默认分组" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="选手名称" prop="name">
                  <el-input v-model="formData.name" clearable placeholder="请输入选手名称" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="选手简介" prop="introduction">
                  <el-input
                    v-model="formData.introduction"
                    type="textarea"
                    clearable
                    placeholder="请输入选手简介，建议10字以内"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7">
            <el-radio-group v-model="radio1">
              <el-radio label="1" size="large">图片封面</el-radio>
              <el-radio label="2" size="large">视频封面</el-radio>
            </el-radio-group>
            <el-upload
              class="avatar-uploader"
              :action="action"
              v-if="radio1 == '1'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="formData.pic" :src="formData.pic" class="avatar" style="width: 7.5rem" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-if="radio1 == '2'"
              v-model="formData.url"
              type="textarea"
              clearable
              placeholder="请输入视频通用代码，仅支持腾讯和哔哩哔哩"
              class="input_style"
              :autosize="{ minRows: 4 }"
            />
            <el-link
              v-if="radio1 == '2'"
              type="primary"
              :underline="false"
              class="flex-end"
            >如何获取视频通用代码？</el-link>
          </el-col>
        </el-row>
        <el-form-item label="选手图片" prop="image">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleImageSuccess"
          >
            <img v-if="formData.image" :src="formData.image" class="avatar" style="width: 9rem" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="选手申报" prop="is_report">
          <el-checkbox v-model="formData.is_report"></el-checkbox>
        </el-form-item>
        <el-form-item label="选手详情" prop="content">
          <el-checkbox v-model="formData.checked1"></el-checkbox>
        </el-form-item>
        <el-form-item prop="content">
          <!-- <editor v-if="!formData.checked1" v-model="formData.content" :height="667" :width="375" /> -->
          <!-- <Editor :height="'800px'" v-if="!formData.checked1"></Editor> -->
          <editor
            v-if="!formData.checked1"
            v-model="formData.content"
            :height="667"
            :width="'100%'"
          />
        </el-form-item>
        <el-form-item prop="url">
          <el-input
            v-if="formData.checked1"
            v-model="formData.url"
            type="textarea"
            :rows="8"
            placeholder="请输入外部链接"
            clearable
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="产品信息" prop="title">
          <div class="add_info_content">
            <div class="box">
              <p>未设置</p>
            </div>
            <div class="hover_style">
              <div class="box">
                <p class="deleteBtn">
                  <Delete style="width: 1em; height: 1em; margin-right: 8px" />
                </p>
                <div class="word_box">
                  <p class>上传产品图(悬浮窗中编辑)</p>
                  <p class>750*300</p>
                </div>
              </div>
            </div>
          </div>
          <div class="addInfo">
            <div class="bg_gr">
              <div class="click_more">
                <el-icon>
                  <Plus />
                </el-icon>
              </div>
              <p>添加产品信息</p>
            </div>
          </div>
        </el-form-item>-->
      </el-form>
    </popup>
  </div>
</template>

<script lang="ts" setup name="zgStatisticsEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import {
  apiZgPlayerAdd,
  apiZgPlayerEdit,
  apiZgPlayerDetail,
} from "@/api/zg_player_list";
import { timeFormat } from "@/utils/util";
import type { PropType } from "vue";
import Editor from "@/components/editor/index.vue";
import config from "@/config";
const action = ref(`${config.baseUrl}${config.urlPrefix}/upload/`);
const props = defineProps({
  groupId: {
    type: String,
  },
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");

// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑选手" : "编辑选手";
});

// 表单数据
const formData = reactive({
  id: "",
  name: "",
  remark: "",
  number: "",
  group_id: 1,
  introduction: "",
  image: "",
  is_report: "" | false,
  url: "",
  activity_id: props.groupId,
  content: "",
  pic: "",
});

// 右边显示
const radio1 = ref("1");

// 上传图片
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response: any,
  uploadFile: { raw: any }
) => {
  formData.pic = URL.createObjectURL(uploadFile.raw!);
};
const handleImageSuccess: UploadProps["onSuccess"] = (
  response: any,
  uploadFile: { raw: any }
) => {
  formData.image = URL.createObjectURL(uploadFile.raw!);
};

// 表单验证
const formRules = reactive<any>({});

// 获取详情
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

const getDetail = async (row: Record<string, any>) => {
  const data = await apiZgPlayerDetail({
    id: row.id,
  });
  setFormData(data);
};

// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate();
  const data = { ...formData };
  mode.value == "edit"
    ? await apiZgPlayerEdit(data)
    : await apiZgPlayerAdd(data);
  popupRef.value?.close();
  emit("success");
};

//打开弹窗
const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

// 关闭回调
const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  setFormData,
  getDetail,
});
</script>
<style lang="scss" scoped>
.add_info_content {
  width: 1.25rem;
  height: 0.66667rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0.03571rem;
  color: #999;
  cursor: pointer;
}
</style>
